<template>
	<view>
		<u-navbar
			:title="$t('merchantMy.navText')"
			leftIconColor="#fff"
			:titleStyle="titleStyle"
			:autoBack="true"
			bgColor="transparent"
		/>
		<view class="bgc">
			<view class="userinfo">
				<u-avatar :src="userInfo.avatar" size="60"></u-avatar>
				<view class="user_right">
					<u--text
						:text="userInfo.nickname"
						color="#fff"
						size="18"
						margin="0 0 5px 0"
						bold
					></u--text>
					<u--text :text="userInfo.mobile" color="#fff" size="14"></u--text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="balance">
				<view class="money">
					<view class="money_title">{{ $t('merchantMy.balance') }}</view>
					<view class="money_num">￥{{ userInfo.money }}</view>
					<view class="money_btn" @click="goPath('pagesA/my/wallet')">
						{{ $t('merchantMy.balanceBtn') }}
					</view>
				</view>
				<view class="line"></view>
				<view class="money">
					<view class="money_title">{{ $t('merchantMy.withdraw') }}</view>
					<view class="money_num">￥{{ userInfo.money }}</view>
					<view class="money_btn" @click="goPath('pagesA/my/withdraw')">
						{{ $t('merchantMy.withdrawBtn') }}
					</view>
				</view>
			</view>
			<button open-type="share">
				<image src="/static/image/copup.png" class="popup" mode="widthFix"></image>
			</button>
			<u--text :text="$t('merchantMy.menuTitle')" size="16" margin="0px 0px 20px 0px"></u--text>
			<view class="classify">
				<view
					class="classify_item"
					v-for="(item, index) in list"
					:key="index"
					@click="goDetail(item)"
					:style="[item.nameZn === '订阅消息' ? { position: 'relative' } : {}]"
				>
					<image :src="item.image" :style="{ width: item.width, height: item.height }"></image>
					<view>{{ language == 'zh' ? item.nameZn : item.nameEn }}</view>
					<view
						v-if="item.nameZn === '订阅消息' && dynum"
						style="width: 40rpx;height: 40rpx;background-color: red;color: #fff;border-radius: 50%;text-align: center;line-height: 40rpx;position: absolute;top:0;right: 10rpx;font-size: 22rpx;display: flex;justify-content: center;align-items: center;"
					>
						{{ dynum }}
					</view>
				</view>
			</view>
		</view>
		<!-- 休息时间的弹窗 -->
		<u-popup :show="show" @close="show = false" mode="bottom" round="20rpx">
			<view class="popup2">
				<!-- 标题 -->
				<view class="title">
					<view @click="show = false"><u-icon name="close" color="#fff"></u-icon></view>
					<view>设置休息时间</view>
					<view @click="handerSubmit">确认</view>
				</view>
				<!-- 标题结束 -->
				<!-- 选择时间的 -->
				<view class="time">
					<view style="width: 300rpx;" @click="timeShow1 = true">
						<u--input
							placeholder="请选择开始的休息时间"
							border="surround"
							v-model="sTime"
							disabled
							fontSize="24rpx"
						></u--input>
					</view>
					<view>至</view>
					<view style="width: 300rpx;" @click="timeShow2 = true">
						<u--input
							placeholder="请选择结束的休息时间"
							border="surround"
							v-model="eTime"
							fontSize="24rpx"
							disabled
						></u--input>
					</view>
				</view>
				<view class="submit-time" @click="handerSubmit">确认休息</view>
			</view>
		</u-popup>

		<!-- 开始时间的弹窗 -->
		<u-datetime-picker
			:show="timeShow1"
			@close="timeShow1 = false"
			@confirm="timeChange1"
			@cancel="(timeShow1 = false), (this.eTime = ''), (this.sTime = '')"
			closeOnClickOverlay
			v-model="startTime"
			mode="datetime"
		></u-datetime-picker>
		<u-datetime-picker
			:show="timeShow2"
			@close="timeShow2 = false"
			@confirm="timeChange2"
			@cancel="(timeShow2 = false), (this.eTime = ''), (this.sTime = '')"
			closeOnClickOverlay
			v-model="endTime"
			mode="datetime"
		></u-datetime-picker>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			timeShow1: false,
			timeShow2: false,
			startTime: Number(new Date()), //默认开始的休息时间
			sTime: '', //选择开始的休息时间
			eTime: '', //选择结束的休息时间
			endTime: Number(new Date()), //默认结束的休息时间
			show: false,
			dynum: uni.getStorageSync('dynum'),
			is_auth: uni.getStorageSync('merchant').is_auth,
			titleStyle: {
				color: '#fff'
			},
			list: [
				{
					image: '/static/image/merchant_6.png',
					nameZn: '商家信息管理',
					nameEn: 'ئۇچۇر',
					path: '/pagesA/my/merchant?type=edit',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/merchant_7.png',
					nameZn: '优惠券管理',
					nameEn: 'ئېتىبار بېرىش',
					path: '/pagesA/my/popup',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/greens.png',
					nameZn: '餐品管理',
					nameEn: 'قورۇما باشقۇرۇش',
					path: '/pagesA/my/greens',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/merchant_19.png',
					nameZn: '数据统计',
					nameEn: 'سانلىق مەلۇمات ستاتىستىكىسى',
					path: '/pagesA/my/statistics',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/merchant_30.png',
					nameZn: '注销商家',
					nameEn: 'تىزىمدىن ئۆچۈرۈش سودىگەرلەر',
					path: '',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/staff.png',
					nameZn: '员工管理',
					nameEn: 'ئىشچى-خىزمەتچىلەرنى باشقۇرۇش',
					path: '/pagesA/my/staff',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/diancan.png',
					nameZn: '餐桌二维码',
					nameEn: 'ئىشچى-خىزمەتچىلەرنى باشقۇرۇش',
					path: '/pagesA/ordermeals/ordermeals',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/subscribed.png',
					nameZn: '订阅消息',
					nameEn: 'ئىشچى-خىزمەتچىلەرنى باشقۇرۇش',
					path: '',
					width: '28px',
					height: '28px',
					is_auth: 1
				},
				{
					image: '/static/image/setxiuxi.png',
					nameZn: '休息一下',
					nameEn: 'ئارام ئېلىڭ',
					path: '',
					width: '28px',
					height: '28px',
					is_auth: 1
				}
			]
		};
	},
	computed: {
		...mapGetters(['userInfo', 'merchant']),
		language() {
			return this._i18n.locale;
		}
	},
	onShareAppMessage() {
		return {
			path: '/pages/home/index',
			imageUrl: '/static/image/share.png',
			title: '订餐就上小订铛'
		};
	},
	created() {
		this.list[5].is_auth = this.merchant.is_auth;

		this.list[6].is_auth = this.merchant.is_auth;
		// console.log(this.list);
		// console.log(this.list[5]);
		// console.log(this.is_auth, '666666666');
		this.getNum();
	},

	methods: {
		timeChange1(event) {
			this.sTime = this.getTime(event.value);
			this.timeShow1 = false;
			console.log(this.sTime);
		},
		timeChange2(event) {
			this.eTime = this.getTime(event.value);
			this.timeShow2 = false;
			console.log(this.eTime);
		},

		getTime(date) {
			var date = new Date(date);
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return Y + M + D + h + m;
		},
		// 确认休息
		handerSubmit() {
			console.log(this.merchant.id);
			if (!this.sTime) {
				return uni.showToast({
					title: '请选择开始的休息时间',
					icon: 'none'
				});
			}
			if (!this.eTime) {
				return uni.showToast({
					title: '请选择结束的休息时间',
					icon: 'none'
				});
			}
			this.$http
				.post('wanlshop/shop/shop_rest', {
					shop_id: this.merchant.id,
					rest_starttime: this.sTime,
					rest_endtime: this.eTime
				})
				.then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '设置成功，好好休息吧',
							icon: 'none'
						});
						this.show = false;
						this.eTime = '';
						this.sTime = '';
					}
				});
		},
		getNum() {
			this.$http.post('user/wx_subscribe').then(re => {
				this.dynum = re.data.wx_subscribe;
				uni.setStorageSync('dynum', re.data.wx_subscribe);
			});
		},
		goDetail(item) {
			if (item.nameZn == '商家信息管理') {
				this.$http.get('wanlshop/shop/repeatApply').then(res => {
					if (res.code == 1)
						[
							uni.$u.route({
								url: '/pagesA/my/merchant?type=edit'
							})
						];
				});
			} else if (item.nameZn == '注销商家') {
				uni.showModal({
					title: '提示',
					content: '确定要注销商家吗',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '注销中...',
								mask: true
							});
							this.$http
								.post('wanlshop/shop/shopCancellation', {
									shop_id: this.merchant.id
								})
								.then(res => {
									uni.hideLoading();
									if (res.code == 1) {
										uni.removeStorage('merchant');
										uni.switchTab({
											url: '/pages/my/index'
										});
									}
								});
						}
					}
				});
			} else if (item.nameZn === '订阅消息') {
				wx.requestSubscribeMessage({
					tmplIds: ['0bqNaK8WInuct4Xc76tvoLxY_yOd-oSPaUHWKfSyN3M'],
					success: res => {
						if (res['0bqNaK8WInuct4Xc76tvoLxY_yOd-oSPaUHWKfSyN3M'] === 'accept') {
							this.$http.post('user/wx_subscribe', { type: 'add' }).then(re => {
								this.dynum = re.data.wx_subscribe;
								uni.setStorageSync('dynum', re.data.wx_subscribe);
							});
						} else {
							return false;
						}
					}
				});
			} else if (item.nameZn === '餐桌二维码') {
				uni.$u.route({
					url: item.path
				});
			} else if (item.nameZn === '优惠券管理') {
				uni.$u.route({
					url: item.path
				});
			} else if (item.nameZn === '餐品管理') {
				uni.$u.route({
					url: item.path
				});
			} else if (item.nameZn === '数据统计') {
				uni.$u.route({
					url: item.path
				});
			} else if (item.nameZn === '员工管理') {
				uni.$u.route({
					url: item.path
				});
			} else if (item.nameZn === '休息一下') {
				this.show = true;
			}
		},
		goPath(path) {
			uni.$u.route({
				url: path
			});
		}
	}
};
</script>
<style>
page {
	background: #f8f9fd;
}
</style>
<style lang="scss" scoped>
button {
	margin: 0;
	padding: 0;
	line-height: 0;
	background: transparent;
}
button::after {
	border: none;
}
.bgc {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url();
	height: 500rpx;
	padding: 190rpx 30rpx 50rpx;
	box-sizing: border-box;

	.userinfo {
		display: flex;
		align-items: center;
	}

	.user_right {
		margin-left: 20rpx;
	}
}

.content {
	padding: 0rpx 30rpx;
	margin-top: -95px;

	.popup {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.balance {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.money {
			text-align: center;

			.money_title {
				color: rgba(38, 38, 38, 1);
				font-size: 28rpx;
				font-weight: 400;
				margin-bottom: 22rpx;
			}

			.money_num {
				font-size: 40rpx;
				color: rgba(254, 96, 35, 1);
				font-weight: 600;
				margin-bottom: 30rpx;
			}

			.money_btn {
				border-radius: 100px;
				background: rgba(255, 247, 235, 1);
				padding: 20rpx 60rpx;
				color: rgba(255, 141, 26, 1);
				font-size: 16px;
				text-align: center;
				margin: 0 auto;
			}
		}

		.line {
			width: 2rpx;
			height: 100rpx;
			background: rgba(238, 238, 238, 1);
		}
	}

	.classify {
		padding: 50rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 10rpx;
		grid-row-gap: 30rpx;

		.classify_item {
			text-align: center;
			color: rgba(51, 51, 51, 1);
			font-size: 26rpx;

			image {
				margin: 0 auto 10px;
				display: block;
			}
		}
	}
}
.popup2 {
	height: 600rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	overflow: hidden;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;
		line-height: 110rpx;
		background: linear-gradient(180deg, #fe6023 0%, rgba(254, 96, 35, 0) 100%);
		padding-left: 30rpx;
		padding-right: 30rpx;
		color: #fff;
	}
}
.time {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 100rpx;
}
.submit-time {
	width: 600rpx;
	height: 94rpx;
	line-height: 94rpx;
	background: linear-gradient(#fe6023 50%, rgba(254, 96, 35, 0.6) 100%);
	margin: 0 auto;
	color: #fff;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	border-radius: 94rpx;
	margin-top: 180rpx;
}
</style>
